<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5.7javascript基础交互案例之轮播图</title>
  <style>
    ul,li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .m-slide{
      width: 100%;
      height: 300px;
      border: 1px solid red;
      overflow: hidden;
      position: relative;
    }
    .m-slide-image{
      display: flex;
      width: 400%;
      height: 300px;
      margin-left: 0%;
    }
    .m-slide-image li{
      flex: 1;
    }
    .m-slide-dot{
      height: 44px;
      bottom: 10px;
      right: 14px;
      position: absolute;
      display: flex;
    }
    .m-slide-dot li{
      width: 44px;
      height: 44px;
      border-radius: 22px;
      margin-left: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #cccccc;
      cursor: pointer;
    }
    li.m-slide-dot-selected{
      background: #ffe121;
    }
  </style>
</head>
<body>
  <!--
    第一步：
	    先拿到节点元素
    第二步：
      1. 复制内容元素节点一复制到最后
      2. 重新设置一下内容元素的一个宽度
      等于我们的ul li个数*100%
      .m-slide-image.width=count(li)*100%
    第三步：
      通过操作的点，动态修改.m-slide-image
      的margin-left值
      0%->-1*100%->-2*200%
      相当于等于-index(dot)*100%
    第四步：
      定时地去修改margin-left的值
      比如：我们3s切换一次
      第3s->-100%
      第6s->-200%
      第9s->-300%
      第12s->-400%
      -(i+1)*3*100%
	    当i%4==0 i=0

  -->
  <div id="slide1" class="m-slide">
    <ul class="m-slide-image">
      <li style="background:#ff9900">图片1</li>
      <li style="background:#ff6677">图片2</li>
      <li style="background:#ee8899">图片3</li>
      <li style="background:#aa9988">图片4</li>
    </ul>
    <ul class="m-slide-dot">
      <li class="m-slide-dot-selected">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <script>
   /**
    * 定义一个轮播图函数
    * @param selectorName 选择器
    **/
   function slide(selectorName) {
    // 根元素
    var mSlideDom = document.querySelector(selectorName)
    // 内容的父级元素，可通过marginLeft
    var mSlideImageDom = mSlideDom.querySelector(".m-slide-image")
    // 获取所有轮播的li
    var mSlideImageLiDomList = mSlideImageDom.querySelectorAll("li")
    // 拿操作的dot
    var mSlideDotDom = mSlideDom.querySelector(".m-slide-dot")
    // 获取操作的dot-li
    var mSlideDotLiDomList = mSlideDotDom.querySelectorAll("li")
    // 复制节点1
    var firstLiClone = mSlideImageLiDomList[0].cloneNode(true)
    // 把节点一插入到最后
    mSlideImageDom.appendChild(firstLiClone)
    // 重新获取一次轮播的li
    mSlideImageLiDomList = mSlideImageDom.querySelectorAll("li")
    // 获取image-li的个数
    var liLen = mSlideImageLiDomList.length
    mSlideImageDom.style.width=liLen*100+'%'
    var dotIndex = 0;
    /**
     * 处理样式
     * @param index 当前索引值
     * */
    function handleStyle(index){
      // 动态修改.m-slide-image的margin-left值
      mSlideImageDom.style.marginLeft = -index*100+'%'
        // 动态修改dot-li的背景颜色
        for(var j=0;j<mSlideDotLiDomList.length;j++) {
          if(index == j) {
            mSlideDotLiDomList[j].className = 'm-slide-dot-selected'
          } else {
            mSlideDotLiDomList[j].className = ''
          }
        }
    }
    // 给所有dot-li追加点击事件
    for(var i=0;i<mSlideDotLiDomList.length;i++) {
      // 获取第i个dot-li
      var mSlideDotLiDom = mSlideDotLiDomList[i]
      // 给dot-li绑定一个索引值
      mSlideDotLiDom.index = i
      // 给dot-li追加点击事件
      mSlideDotLiDom.onclick=function() {
        //console.log(this.index)
        dotIndex = this.index
        handleStyle(this.index)
      }
    }
    // 定时器，每3s钟执行一次
    setInterval(function(){
      // 处理样式-与点击事件一样
      handleStyle(dotIndex)
      // 索引值自过
      dotIndex=dotIndex+1
      // 判断是否完成一个周期
      if(dotIndex==mSlideDotLiDomList.length) {
        // 重置索引
        dotIndex = 0
      }
    }, 3000);
    //console.log(liLen)
    //console.log(mSlideImageDom)
    //console.log(mSlideDotDom)
   }
   slide('#slide1')
   // js的定时器
   // 延时执行-只执行一次
  //  setTimeout(function(){
  //    console.log("333")
  //  }, 2000);
   // 每隔一段时间执行一次
  //  var dotIndex = 0;
  //  setInterval(function(){
  //   console.log(dotIndex)
  //   dotIndex=dotIndex+1
  //   if(dotIndex == 4) {
  //     dotIndex=0
  //   }
  //  }, 1000);
  </script>
</body>
</html>